<template>
  <div class="register">
    <header class="flex-between">
      <div class="leftdesc flex-start">
        <div class="logo"></div>
        <div class="system">{{systemName}}</div>
      </div>
      <div class="rightdesc flex-start">
        <div class="question">{{headerQuestion}}</div>
        <div class="loginbtn" @click="$router.push('/Login')">登录</div>
      </div>
    </header>
    <div class="content">
      <router-view></router-view>
    </div>
    <img-check-dialog ref="imgDialog"></img-check-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      systemName: '福讯会议系统',
      headerQuestion: '已有账号？',
      // 当前路由
      routeName: this.$route.name
    }
  },
  computed: {
    // 判断图形验证码组件显示隐藏
    showImgDialog () {
      return this.$store.state.common.showImgDialog
    },
    // 获取手机号
    phone () {
      if (this.routeName === 'signUp') {
        return this.$store.state.register.phone
      } else {
        return this.$store.state.findPassword.phone
      }
    }
  },
  watch: {
    showImgDialog: {
      immediate: true,
      handler (val) {
        if (val) {
          this.$refs.imgDialog.getPhone(this.phone)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .register{
    width: 100%;
    height: 100%;
    header{
      width: 1200px;
      height: 88px;
      // background-color: pink;
      border-bottom: 1px solid #d8dee9;
      margin: 0 auto;
     .leftdesc{
        .logo{
          width: 48px;
          height: 48px;
          background: url('../../assets/Login/images/logo.png') no-repeat;
          background-position: center center;
          background-size: 100% 100%;
        }
        .system{
          margin-left: 12px;
          height: 33px;
          font-size: 24px;
          font-weight: 600;
          text-align: left;
          color: #304eec;
          line-height: 33px;
          letter-spacing: 1px;
        }
      }
     .rightdesc{
        .question{
           height: 22px;
           font-size: 16px;
           font-weight: 400;
           text-align: left;
           color: #273553;
           line-height: 22px;
           letter-spacing: 0px;
        }
        .loginbtn{
          cursor: pointer;
          margin-left: 12px;
          width: 57px;
          height: 32px;
          border: 1px solid #304eec;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          color: #304eec;
          line-height: 32px;
          letter-spacing: 0px;
        }
      }
    }
    .content{
      width: 1200px;
      padding-top: 24px;
      margin: 0 auto;
    }
  }
</style>
